<!-- 素材审核页面 -->
<template>
  <div>
    <Layout>
      <template #search>
        <el-form
          :model="queryParams"
          ref="queryFormRef"
          :inline="true"
          :v-show="true"
          label-width="68px"
        >
          <el-form-item label="素材类型" prop="materialType">
            <InputSelect
              text="请输入素材类型"
              :modelValue="queryParams.materialType"
              :options="materialType"
              @update:modelValue="materialTypeSearch"
            />
          </el-form-item>
          <el-form-item label="素材格式类型" prop="materialFormatType">
            <InputSelect
              text="请输入素材格式类型"
              :modelValue="queryParams.materialFormatType"
              :options="materialFormat"
              @update:modelValue="materialFormatTypeSearch"
            />
          </el-form-item>

          <el-form-item label="审核状态" prop="auditStatus">
            <InputSelect
              text="请输入审核状态"
              :modelValue="queryParams.auditStatus"
              :options="queryData.auditStatusList"
              @update:modelValue="auditStatusSearch"
            />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery"
              >搜索
            </el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="Download"
              :disabled="multiple"
              @click="handleExport"
              >导出
            </el-button>
          </el-col>
        </el-row>
      </template>

      <template #content>
        <el-table :data="tableList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />

          <el-table-column
            prop="materialUrl"
            label="素材"
            align="center"
            width="200px"
          >
            <template #default="scope">
              <FilePreview-table
                :src="scope.row.materialUrl"
                fit="cover"
                :width="200"
              >
              </FilePreview-table>
            </template>
          </el-table-column>
          <el-table-column
            prop="materialTitle"
            label="素材标题"
            align="center"
          ></el-table-column>

          <el-table-column
            prop="typeName"
            label="素材类型"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="thumbnailUrl"
            label="封面"
            align="center"
            width="100px"
          >
            <template #default="scope">
              <ImagePreview
                :src="scope.row.thumbnailUrl"
                :width="80"
                :height="80"
                fit="cover"
              />
            </template>
          </el-table-column>

          <el-table-column prop="materialTags" label="标签" align="center">
            <template #default="scope">
              <TableTag :dynamicTags="scope.row.materialTags"></TableTag>
            </template>
          </el-table-column>
          <el-table-column prop="auditStatus" label="审核状态" align="center">
            <template #default="scope">
              <el-tag v-show="scope.row.auditStatus == 0" effect="dark" round>
                未通过</el-tag
              >
              <el-tag v-show="scope.row.auditStatus == 1" effect="dark" round>
                审核中</el-tag
              >
              <el-tag v-show="scope.row.auditStatus == 2" effect="dark" round>
                已通过</el-tag
              >
            </template>
          </el-table-column>

          <el-table-column
            prop="remark"
            label="备注信息"
            align="center"
          ></el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
            fixed="right"
          >
            <template #default="scope">
              <el-button
                link
                type="primary"
                icon="Check"
                @click="handleUpdate(scope.row)"
                v-show="scope.row.auditStatus == 1"
                >通过
              </el-button>
              <el-button
                link
                type="primary"
                icon="Close"
                @click="handleDelete(scope.row)"
                v-show="scope.row.auditStatus == 1"
                >不通过
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getPageList"
        />
      </template>
    </Layout>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, toRefs } from "vue";
import { ElMessage } from "element-plus";
import Layout from "@/components/Layout/Layout-common.vue";
import { getMaterialList, updateMaterial } from "@/api/material.js";
import { getMaterialTypeNameList } from "@/api/page/classify.js";
import { download } from "@/utils/request.js";

// 分页数据
const total = ref(0);
// 用户数据
const tableList = ref([]);
// 用户选择项
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);

// 定义 queryFormRef
const queryFormRef = ref(null);
// 搜索查询数据
const queryData = reactive({
  // 搜索栏的数据
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    auditStatus: 1,
  },
  // 搜索栏的表单校验规则
  queryRules: {},
  // 审核状态
  auditStatusList: [
    { name: "未通过", value: "0" },
    { name: "审核中", value: "1" },
    { name: "已通过", value: "2" },
  ],
  // 素材类型
  materialTypeList: [],
});
const { queryParams, materialTypeList } = toRefs(queryData);

// 弹窗的表单数据
const formData = reactive({
  // 修改、新增弹窗表单数据
  form: {},
  rules: {},
});
// 结构属性，转为ref
const { form, imgData, fileData, fileList } = toRefs(formData);

// 使用 computed 缓存处理后的素材类型List
const materialType = computed(() => {
  return materialTypeList.value.map((item) => {
    return {
      name: item.typeName,
      value: item.typeId,
    };
  });
});

// 素材格式类型
const materialFormat = computed(() => {
  return [
    { name: "png", value: "png" },
    { name: "jpg", value: "jpg" },
    { name: "jpeg", value: "jpeg" },
    { name: "mp4", value: "mp4" },
    { name: "mp3", value: "mp3" },
    { name: "xlsx", value: "xlsx" },
    { name: "xls", value: "xls" },
    { name: "pdf", value: "pdf" },
    { name: "docx", value: "docx" },
    { name: "doc", value: "doc" },
    { name: "webp", value: "webp" },
  ];
});

onMounted(() => {
  getPageList();
  // 获取所有素材类型数据
  getMaterialType();
});

// 搜索栏的查询
const handleQuery = () => {
  console.log("queryParams", queryParams.value);
  getPageList();
};

// 素材标题的

// 重置查询条件
const resetQuery = () => {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
  };
};

// 批量操作
const handleSelectionChange = (val) => {
  ids.value = val.map((item) => item.materialId);
  single.value = val.length != 1;
  multiple.value = !val.length;
  console.log("ids:", ids.value);
};

// 导出数据
const handleExport = () => {
  // 发送请求
  download(
    "/Material/export",
    ids.value,
    `素材信息_${new Date().getTime()}.xlsx`
  );
};

// 获取所有数据
function getPageList() {
  getMaterialList(queryParams.value).then((response) => {
    tableList.value = response.rows;
    console.log("tableList:", tableList.value);
    total.value = response.total;
  });
}

// 获取素材类型数据
function getMaterialType() {
  getMaterialTypeNameList().then((response) => {
    materialTypeList.value = response.data;
    console.log("materialTypeList:", materialTypeList.value);
  });
}

// 搜索-素材类型的下拉菜单
const materialTypeSearch = (val) => {
  queryParams.value.materialType = val;
};
// 搜索-素材格式类型的下拉菜单
const materialFormatTypeSearch = (val) => {
  queryParams.value.materialFormatType = val;
};
// 搜索-审核状态的下拉菜单
const auditStatusSearch = (val) => {
  queryParams.value.auditStatus = val;
};

// 通过按钮操作
function handleUpdate(row) {
  let data = { materialId: row.materialId, auditStatus: 2 };
  updateMaterial(data).then((result) => {
    if (result.code == 200) {
      ElMessage.success("通过！");
    }
    if (result.code == 500) {
      ElMessage.error("操作失败");
    }
  });
  setTimeout(() => {
    getPageList();
  }, 200);
}

//  不通过按钮操作
const handleDelete = (row) => {
  let data = { materialId: row.materialId, auditStatus: 0 };
  updateMaterial(data).then((result) => {
    if (result.code == 200) {
      ElMessage.success("不通过！");
    }
    if (result.code == 500) {
      ElMessage.error("操作失败");
    }
  });
  setTimeout(() => {
    getPageList();
  }, 200);
};

// 弹框确认  修改/添加

// 表格文件大小格式
const fileSizeFormatter = (row, column, value) => {
  return value.toFixed(2) + " KB"; // 保留两位小数
};
</script>

<style lang="scss" scoped></style>
